<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" style="padding:10px">
                    <p style="margin:30px;font-size:20px">实时运单</p>
                    <div style="margin:20px;width:500px">
                        
                        <el-button type="primary" circle style="margin-right:30px"></el-button>
                        <el-button type="info" circle style="margin-right:30px"></el-button>
                        <el-button type="danger" circle style="margin-right:30px"></el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top:25px">
            <el-col :span="14">
                <div class="grid-content bg-purple" style="padding:10px;width:950px;height:630px">
                    <p style="font-size:20px;margin-left:20px">分布图</p>
                    <baidu-map class="map" :center="center" :scroll-wheel-zoom="true">
                        <bm-polyline :path="polylinePath" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" :editing="true" @lineupdate="updatePolylinePath"></bm-polyline>
                    </baidu-map>
                    <!-- <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo" style="width:850px;height:500px;margin:50px;border:1px solid black">
                        <el-amap-polyline :editable="polyline.editable"  :path="polyline.path" :events="polyline.events"></el-amap-polyline>
                    </el-amap> -->
                    

                </div>
            </el-col>
            <el-col :span="10">
                <div class="grid-content bg-purple" style="padding:10px;height:630px">
                    <p style="font-size:20px;margin-left:20px">报警信息</p>
                    <el-table
                        :data="order_list"
                        style="width: 100%">
                        <el-table-column
                            prop="invoice"
                            label="运单号"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="address"
                            label="收货地址"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="create_time"
                            label="创建时间">
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                            <template slot-scope="scope">
                                <el-button @click="amap_methods(scope.row)" type="text" size="small">查看</el-button>
                                <el-button type="text" size="small">编辑</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div></el-col>
        </el-row>
    </div>
</template>
<script>
import {get_order_list_get} from './axios_api/api.js'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
// import {AMap,VueAMap} from '../main.js'
// import VueAMap from '../../node_modules/vue-amap'
// VueAMap.initAMapApiLoader({
//     key: '5ab4c8586d4854707ddf0a30818033dc',
//     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder'],
//     uiVersion: '1.0',
//     v: '1.4.4'
// });
// import AMap from '../../babel.config.js'
export default {
    data() {
        return {
            
            center: '河南省',
            zoom: 3,
            order_list: [],
            polylinePath: [
                {lng: 113.743629, lat: 35.97052},
            ]
            // zoom: 12,
            // center: [121.5273285, 31.25515044],
            // polyline: {
            //     path: [[121.5389385, 31.21515044], [121.5389385, 31.29615044]],
            //     events: {
            //     click(e) {
            //         alert('click polyline');
            //     },
            //     end: (e) => {
            //         let newPath = e.target.getPath().map(point => [point.lng, point.lat]);
            //         console.log(newPath);
            //     }
            //     },
            //     editable: false
            // }
        }
    },
    mounted() {
        this.get_order_list()
    },
    methods: {
        updatePolylinePath (e) {
            this.polylinePath = e.target.getPath()
        },
        addPolylinePoint () {
            this.polylinePath.push({lng:119.24444,lat:39.87634})
        },
        handleClick(row) {
            console.log(row.shipping_addresses);
        },
        get_order_list(){
            get_order_list_get().then(res => {
                console.log(res);
                this.order_list = res.order_list
                
            })
        },
        amap_methods(row){
                console.log(row.address)
                if(row.address){
                    this.addPolylinePoint()
                }
                
                // var geocoder = new AMap.Geocoder();
                // var marker = new AMap.Marker();
                // VueAMap.Geocoder.getLocation(row.shipping_addresses, function(status, result) {
                //     if (status === 'complete'&&result.geocodes.length) {
                //         var lnglat = result.geocodes[0].location
                //         this.polyline.path[0][0] = lnglat.lng,
                //         this.polyline.path[0][1] = lnglat.lat
                //     }else{
                //         console.log('根据地址查询位置失败');
                //     }
                // });
                
        }
    },
    components: {
        BaiduMap
    }
    
}
</script>

<style scoped>
    .bg-purple-dark {
        background: #fff;
    }
    
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple {
        background: #fff;
    }
    .map {
        width: 100%;
        height: 300px;
    }
</style>